<template>
	<view>
		<view class="main-head flex-no-horizontal">
			<view class="title">
				我的藏品
			</view>
			<!-- toMyStore -->
			<!-- <view class="icon" @click="toMyStore">
				<u-icon name="arrow-right" color="#000" size="25"></u-icon>
			</view> -->
			<view class="icon" @click="toMyCollection">
				<u-icon name="arrow-right" color="#000" size="25"></u-icon>
			</view>
			<!-- <view class="icon" @click="toFace">
				<u-icon name="arrow-right" color="#000" size="25"></u-icon>
			</view> -->
		</view>

		<view class="main-item-box flex-no-horizontal" v-if="listProcessing.length">
			<view class="main-item" v-for="(item, index) in listProcessing" :key="index" @click="handle(item)">
				<view class="cover" v-if="item.apiTypeState == 1">
					<u--image class="coverImgsBck" :src="item.imgUrl" width="210rpx" height="294rpx" :lazy-load="true">
					</u--image>
				</view>
				<view class="cover" v-else>
					<view class="storages" v-if="item.search_title">
						<view class="storageBck" @tap="onGoto(item)">
							 <!-- :style="`background: url(${item.image}) no-repeat; background-size: 100% 100%;` -->
							 <u--image :src="item.image" class="coverImgsBck" width="210rpx" height="294rpx"
							 	:lazy-load="true"></u--image>
							<view class="cont">
								<!-- <view class="contImgs">
									<u--image mode="aspectFit" :src="item.imgUrl" width="180rpx" height="190rpx"
										:lazy-load="true"></u--image>
								</view> -->
								<view class="contBtns">
									<text>查看更多</text>
									<u-icon name="arrow-right" size="22rpx" color="#F3F6FF"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view v-if="item.collectionType == 2 && !item.locked">
						<view class="collectionBck">
							<view class="collectionImgs">
								<image class="" src="/static/img/lock.png" mode=""></image>
								<view class="text">
									<!-- <view class="font">
										暂未解锁
									</view> -->
									<view class="font">
										活动期间未解锁
									</view>
									<view class="font fontText">
										藏品将自动销毁
									</view>
								</view>
								<view class="collectionBtn">
									去解锁
								</view>
							</view>
						</view>
						<u--image :src="item.imgUrl" class="imgs" width="210rpx" height="294rpx" :lazy-load="true">
						</u--image>
					</view>
					<view v-else-if="!item.storageType && !item.search_title">
						<u--image :src="item.imgUrl" class="coverImgsBck" width="210rpx" height="294rpx"
							:lazy-load="true"></u--image>
					</view>
				</view>
				<view class="m-t-5 nameFont">{{item.name ? item.name : item.search_title}}</view>
			</view>
		</view>
		<view class="main-item-box main-item-box-empty flex-no-horizontal" v-else>
			<u--image :src="require('../../../static/empty/index-empty.png')" width="209" height="154"></u--image>
			<view class="text-center f-xs">您还未获得藏品哦~</view>
		</view>
		<u-popup :show="blindBoxType" mode="center" round="20"  bgColor="transparent" overlayOpacity="0.8">
			<view class="warp">
				<view class="rect" @tap.stop>
					<u--image :src="openData.gif_img" width="502rpx" height="481rpx" class="cover"></u--image>
					<view class="f-xl btn text-center bold openBtnBlindBox" @click="$u.throttle(openBlind,500)">打开盲盒</view>
					<view class="closeBlind">
						<u--image src="/static/img/closeBlind.png" width="52rpx" height="52rpx" @tap="blindBoxType = false" class="cover"></u--image>
					</view>
				</view>
			</view>
		</u-popup>
		 <!-- v-if="isShowOpen" -->
		<open-ben :show="true" v-if="isShowOpen" @onGotoPage="gotoPages" :proData="openData" @close="closeBox"></open-ben>
	</view>
</template>

<script>
	import openBen from '../../collection/common/openBen.vue'
	import getMyCollection from '../../../common/mixin/getMyCollection.js'
	import {
		ifLoginFun
	} from '../../../utility/weChatLogin.js'
	export default {
		mixins: [getMyCollection],
		components: {
			openBen
		},
		data() {
			return {};
		},
		computed: {
			listProcessing() {
				return this.list.filter((item, index) => {
					return index < 3
				})
			}
		},
		created() {

		},
		methods: {
			onGoto(item) {
				uni.navigateTo({
					url: `/pages/collection/storageBrooch?id=${item.id}&title=${item.display_title}&count=${item.count}`
				})
			},
			toMyCollection() {
				if (!ifLoginFun()) return
				uni.navigateTo({
					url: '../collection/myCollection'
				})
			},

			toFace() {
				if (!ifLoginFun()) return
				uni.navigateTo({
					url: '../safe/index'
				})
			},

			toMyStore() {
				if (!ifLoginFun()) return
				uni.navigateTo({
					url: '/pages/market/store'
				})
			}
		}
	};
</script>

<style lang="scss">
	.closeBlind{
		display: flex;
		justify-content: center;
	}
	.openBtnBlindBox{
		background: linear-gradient(0deg, #FFFFFF, #E1D4FF);
		border-radius: 80rpx;
		padding:27rpx 0;
		position: relative;
		bottom: 86rpx;
		width: 60%;
		margin: auto;
		font-size: 26rpx;
		color: #37226D;
	}
	.nameFont {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.main-head {
		margin-bottom: 50rpx;
		justify-content: space-between;
		padding-top: 48rpx;
		border-radius: 40rpx 40rpx 0 0;

		.title {
			font-size: $uni-font-size-xlg;
			color: $uni-color-black;
			font-weight: bold;
		}
	}

	.main-item-box {
		align-items: flex-start;
		padding-bottom: 20rpx;

		.main-item {
			width: 210rpx;
			margin-right: 20rpx;
			
			.cover {
				position: relative;
				border-radius: 10rpx;
				overflow: hidden;
				.storages {
					.storageBck {
						width: 210rpx;
						height: 294rpx;
						// padding: 33rpx 14rpx 30rpx;
						.cont {
							.contImgs {
								display: flex;
								justify-content: center;
								padding-top: 30rpx;
							}
				
							.contFont {
								color: #FFFCEF;
								font-size: 28rpx;
								margin-bottom: 25rpx;
							}
				
							.contBtns {
								background: linear-gradient(216deg, #2F4C4D 0%, #3E735E 100%);
								padding: 10rpx 0;
								display: flex;
								align-items: center;
								justify-content: center;
								border-radius: 60rpx;
								width: 80%;
								margin: 0 auto 22rpx;
								position: absolute;
								bottom: 0;
								right: 0;
								left: 0;
								text {
									color: #F3F6FF;
									font-size: 22rpx;
									margin-right: 8rpx;
									margin-left: 20rpx;
								}
							}
						}
					}
				}
				.coverImgsBck {}

				.collectionBck {
					color: #FFFFFF;
					background: rgba(28, 34, 53, .9);

					position: absolute !important;
					top: 0;
					z-index: 9;
					left: 0;
					right: 0;
					bottom: 0;
					width: 100%;
					height: 100%;

					.collectionImgs {
						width: 100%;
						text-align: center;
						padding-top: 50rpx;
						border-radius: 10rpx;

						.text {
							font-size: 14rpx;
							line-height: 42rpx;
							margin: 15rpx 0 20rpx;

							.font {
								color: #FFFFFF !important;
							}
						}

						.collectionBtn {
							background: #000000;
							border-radius: 30rpx;
							padding: 10rpx 15rpx;
							font-size: 24rpx;
							width: 50%;
							margin: auto;
							color: #FFFFFF !important;
						}

						image {
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
			}

			view {
				color: $uni-color-black;
				font-size: $uni-font-size-base;
				text-align: center;
			}
		}

	}

	.main-item-box-empty {
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
</style>
